<template>
  <a-modal
    :visible="isshow"
    :title="title"
    width="740px"
    centered
    :footer="null"
    @cancel="close"
  >
    <div class="form" v-for="(item, index) in form" :key="index">
      <a-form-model ref="ruleform" :model="item" :rules="rules">
        <div class="form-content">
          <div>
            <a-form-model-item label="收件人" :colon="flag" prop="name">
              <a-input
                v-model.trim="item.name"
                placeholder="请输入收件人姓名"
                size="large"
              />
            </a-form-model-item>
            <a-form-model-item
              label="联系电话"
              :colon="flag"
              prop="phoneNumber"
            >
              <a-input
                v-model="item.phoneNumber"
                placeholder="请输入联系电话"
                size="large"
              />
            </a-form-model-item>
          </div>
          <div>
            <a-form-model-item
              label="通讯地址"
              class="address"
              :colon="flag"
              prop="place"
            >
              <div class="area">
                <a-cascader
                  v-model="item.place"
                  :options="provinceOptions"
                  placeholder="请选择所属省市区"
                  change-on-select
                  @click="onclick(index)"
                  ref="dizhi"
                />
                <a-input
                  v-model.trim="item.desc"
                  placeholder="请输入详细地址"
                  size="large"
                />
              </div>
            </a-form-model-item>
          </div>
        </div>
      </a-form-model>
      <a href="#" class="add" @click="deletePaper(index, item.id)"> 删除 </a>
    </div>
    <a href="#" class="add" @click="addPaper"> +添加地址信息 </a>
    <Footer @close="close" @ok="submit" />
  </a-modal>
</template>
<script>
import { phoneCheck } from '@/utils/validator'
import Footer from '@/components/footer'
import { deleteCustomerContactList } from '@/api/human'
export default {
  props: {
    list: {
      type: Array
    },
    isshow: {
      type: Boolean
    }
  },
  data() {
    return {
      title: '地址管理',
      flag: false,
      visible: false,
      form: [],
      provinceOptions: this.difang,
      rules: {
        name: [
          { required: true, message: '请输入收件人名称' },
          { max: 20, message: '长度不能超过20' }
        ],
        phoneNumber: [
          { required: true, message: '请输入联系电话' },
          { validator: phoneCheck.bind(this) },
          { max: 11, message: '长度不能超过11' }
        ],
        place: [{ required: true, message: '请输入详细地址' }]
      },
      // 保存删除前的数据
      beforeDelete: []
    }
  },

  components: {
    Footer
  },
  methods: {
    close() {
      this.beforeDelete = []
      this.$emit('close')
      this.$emit('updata')
    },
    addPaper() {
      // 客户管理的修改
      this.form.push({
        baseId: this.$route.query.id
      })
    },
    // 删除地址信息
    async deletePaper(index, id) {
      this.form.splice(index, 1)
      this.beforeDelete = JSON.parse(JSON.stringify(this.form))
      // 客户管理的删除
      await deleteCustomerContactList({ id })
      this.$message.success('删除成功！')
      this.$emit('updata')
    },
    // 提交开票信息
    submit() {
      // 触发检查
      if (this.$refs.ruleform && this.$refs.ruleform.length > 0) {
        let validate = true
        this.$refs.ruleform.forEach(item => {
          item.validate(valida => {
            validate = valida
          })
        })
        // 传递数据，触发保存
        setTimeout(() => {
          if (validate) {
            // 拷贝数据
            const params = JSON.parse(JSON.stringify(this.form))
            // 格式化数据
            params.forEach(item => {
              item.province = item.place[0] || ''
              item.city = item.place[1] || ''
              item.area = item.place[2] || ''
              delete item.place
            })
            this.$emit('close')
            this.$emit('updata', params)
            this.beforeDelete = []
          }
        })
      } else {
        this.beforeDelete = []
        this.$emit('close')
      }
    }
  },
  watch: {
    list(n) {
      // 判断我点击删除的时候，是否保存了删除之前的数据了，如果保存直接赋值，如果没有使用新的数据
      // 为了避免我点击删除后因为更新直接获取的新数据将我后面新增的数据直接覆盖了
      if (this.beforeDelete.length < 1) {
        // 格式化数据
        n.forEach(item => {
          item.place = [item.province, item.city, item.area]
        })
        this.form = JSON.parse(JSON.stringify(n))
      } else {
        this.form = JSON.parse(JSON.stringify(this.beforeDelete))
      }
    }
  },
  created() {
    this.path = this.$route.path
  }
}
</script>
<style lang="less" scoped>
@import '../../../assets/css/modal.less';
.form {
  border-bottom: 1px solid #e8e8e8;
}
.form-content {
  > div {
    display: flex;
    justify-content: center;
    .ant-form-item {
      margin-left: 20px;
      flex: 1;
      &:first-child {
        margin-left: 0;
      }
    }
    .address {
      .area {
        display: flex;
        > .ant-input {
          margin-left: 20px;
        }
      }
    }
  }
}
.remove {
  display: block;
  padding-bottom: 20px;
  color: #0096ff;
}
.add {
  display: block;
  color: #0096ff;
  padding: 20px 0;
}
/deep/.ant-modal-body {
  max-height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #e1e1e1;
  }
}
</style>
